// 封装弹性盒子布局,使用实例@include Flexs(...);
@mixin Flexs($justifyContent: center,$alignItems: center,$flexDirection: row,) {
  display: flex;
  justify-content: $justifyContent;
  align-items: $alignItems;
  flex-direction: $flexDirection;
}

// 内容框体
// $boxHeight:内容部分高度,$boxWidth:内容部分宽度,$boxLineColor:标题名称前面竖线颜色,$boxBackgroundColor:最外层底框颜色,$boxTitleColor:标题部分底框颜色,$boxContentColor:内容部分底框颜色
@mixin templateBox($boxWidth: 340px,$boxHeight: 230px,$boxLineColor:rgba(255,187,51,1),$boxBackgroundColor:rgba(0,0,0,0.2),$boxTitleColor:rgba(0,0,0,0.6),$boxContentColor:rgba(0,0,0,0.5)) { 
  // 最外层透明框
  .template-box{
      width: $boxWidth + 10px;
      height: $boxHeight + 60px;
      background-color: $boxBackgroundColor;
      // 标题部分
      &>:nth-child(1){
          display: flex;
          width: $boxWidth;
          height: 40px;
          background-color: $boxTitleColor;
          justify-content: space-between;
          align-items: center;
          // 标题内容
          &>:nth-child(1){
              display: flex;
              align-items: center;
              font-size: 18px;
              // 标题名字前竖线
              &::before{
                  content: '';
                  display: block;
                  width: 3px;
                  height: 16px;
                  margin: 1px 5px 0 15px;
                  background-color: $boxLineColor;
              }
          }
          // 内容部分切换标签
          &>:nth-child(2){
              margin-right: 15px;
              display: flex;
              align-items: center;
              // 标签内容
              > div {
                  height: 16px;
                  font-size: 12px;
                  padding: 2px 5px;
                  margin-left: 3px;
                  color: $fontColorLightGray;
                  background-color: $fontColorLightGrayBround;
              }
              .btn-click{
                  color: $fontColorLightBlue;
                  background-color: $fontColorLightBlueBround;
              }
          }
      }
      // 内容部分
      &>:nth-child(2){
          width: $boxWidth;
          height: $boxHeight;
          background-color: $boxContentColor;
          padding: 15px;
          margin-top: 10px;
          box-sizing: border-box;
      }
  }
}
/*
内容框体动画版使用实例
引入本sass文件
@import "../../../assets/css/traffic.scss";
执行该sass函数
@include templateBox(宽,高);
粘贴html部分
<!-- 最外层透明框 -->
<div :class="['template-box','animate__animated',isLeave?'animate__fadeOutLeft':'animate__fadeInLeft']">
  <!-- 标题部分 -->
  <div class="animate__animated animate__delay-1s animate__fadeInLeft">
    <!-- 标题内容 -->
    <div>标题名称</div>
    <!-- 切换按钮 -->
    <div>
      <div @click="btnClick('今日')" :class="[{'btn-click':currentState==='今日'}]">今日</div>
      <div @click="btnClick('昨日')" :class="[{'btn-click':currentState==='昨日'}]">昨日</div>
      <div @click="btnClick('上周')" :class="[{'btn-click':currentState==='上周'}]">上周</div>
    </div>
  </div>
  <!-- 内容部分 -->
  <div class="animate__animated animate__delay-2s animate__fadeInLeft content"></div>
</div>
粘贴data部分
currentState:'今天'
isLeave: false
粘贴methods部分
btnClick(currentState) {
    this.currentState = currentState
    switch (currentState) {
        case '今日':
        console.log('今日')
        break
        case '昨日':
        console.log('昨日')
        break
        case '上周':
        console.log('上周')
        break
    }
}
粘贴生命周期内容
beforeRouteLeave(to, from, next) {
    this.isLeave = true
    setTimeout(() => {
      next()
    }, 800)
}
*/

@mixin overflowStyle(){
  // 滚动条整体样式
  .overflowStyle{
      &::-webkit-scrollbar {
          width: 2px;     
          // height: 1px;
        }
      // 滚动条里面的滑块
      &::-webkit-scrollbar-thumb {
          border-radius: 1px;
          background: $webColorLightBlue;
      }
      // 滚动条里面轨道背景
      &::-webkit-scrollbar-track {
          border-radius: 1px;
          background: rgba($color: $webColorDarkGray, $alpha: 0.5);
      }
  }
}